<template>
  <div>
    <div class="header">
      <!-- <img src="../assets/ia_100000051.jpg" alt="" /> -->
      <lunbo></lunbo>
    </div>
    <div class="main">
      <div class="main-top">
        <ul class="top-ul">
          <li>正在热映(98)</li>
          <li>即将上映(97)</li>
        </ul>
        <span class="top-span">查看全部</span>
      </div>
      <div class="main-btn">
        <ul class="btn-ul">
          <li class="btn-li">
            <div class="mask"></div>
            <img src="../assets/ia_100000000.jpg" alt="" class="li-img" />
            <div class="img-name">
              <span>李茂办太子</span>
              <span>8.9</span>
            </div>
            <div class="seat">选座购票</div>
          </li>
          <li class="btn-li">
            <div class="mask"></div>
            <img src="../assets/ia_100000002.jpg" alt="" class="li-img" />
            <div class="img-name">
              <span>李茂办太子</span>
              <span>8.9</span>
            </div>
            <div class="seat">选座购票</div>
          </li>
          <li class="btn-li">
            <div class="mask"></div>
            <img src="../assets/ia_100000003.jpg" alt="" class="li-img" />
            <div class="img-name">
              <span>李茂办太子</span>
              <span>8.9</span>
            </div>
            <div class="seat">选座购票</div>
          </li>
          <li class="btn-li">
            <div class="mask"></div>
            <img src="../assets/ia_100000004.jpg" alt="" class="li-img" />
            <div class="img-name">
              <span>李茂办太子</span>
              <span>8.9</span>
            </div>
            <div class="seat">选座购票</div>
          </li>
          <li class="btn-li">
            <div class="mask"></div>
            <img src="../assets/ia_100000005.jpg" alt="" class="li-img" />
            <div class="img-name">
              <span>李茂办太子</span>
              <span>8.9</span>
            </div>
            <div class="seat">选座购票</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="can-img">
      <img src="../assets/ia_100000068.png" alt="" />
    </div>
    <div class="content">
      <div class="hedaer-left">
        <header class="left-top">
          <h6>上周票房排行</h6>
          <span>全部影片</span>
        </header>
        <ul class="love-top">
          <li class="love-li">
            <span class="love-left">1</span>
            <span class="love-con">爱情神话</span>
            <span class="love-right">8.6</span>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <span class="love-con">爱情神话</span>
            <span class="love-right">8.6</span>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <span class="love-con">爱情神话</span>
            <span class="love-right">8.6</span>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <span class="love-con">爱情神话</span>
            <span class="love-right">8.6</span>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <span class="love-con">爱情神话</span>
            <span class="love-right">8.6</span>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <span class="love-con">爱情神话</span>
            <span class="love-right">8.6</span>
          </li>
        </ul>
      </div>
      <div class="hedaer-con">
        <header class="left-top">
          <h6>热门影院排行</h6>
          <span>全部影院</span>
        </header>
        <ul class="hot-con">
          <li class="love-li">
            <span class="love-left">1</span>
            <div class="hot-btn">
              <span class="hot-spantop">中影千人影城(丰台集美广场店)</span>
              <span class="hot-spanbtn">丰台区卢沟桥村杜家环岛北侧</span>
            </div>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <div class="hot-btn">
              <span class="hot-spantop">中影千人影城(丰台集美广场店)</span>
              <span class="hot-spanbtn">丰台区卢沟桥村杜家环岛北侧</span>
            </div>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <div class="hot-btn">
              <span class="hot-spantop">中影千人影城(丰台集美广场店)</span>
              <span class="hot-spanbtn">丰台区卢沟桥村杜家环岛北侧</span>
            </div>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <div class="hot-btn">
              <span class="hot-spantop">中影千人影城(丰台集美广场店)</span>
              <span class="hot-spanbtn">丰台区卢沟桥村杜家环岛北侧</span>
            </div>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <div class="hot-btn">
              <span class="hot-spantop">中影千人影城(丰台集美广场店)</span>
              <span class="hot-spanbtn">丰台区卢沟桥村杜家环岛北侧</span>
            </div>
          </li>
          <li class="love-li">
            <span class="love-left">1</span>
            <div class="hot-btn">
              <span class="hot-spantop">中影千人影城(丰台集美广场店)</span>
              <span class="hot-spanbtn">丰台区卢沟桥村杜家环岛北侧</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="hedaer-right">
        <header class="left-top">
          <h6>热门预告片</h6>
        </header>
      </div>
    </div>
  </div>
</template>
<script>
// import Lunbo from '../components/Lunbo.vue'
import Lunbo from "../components/Lunbo.vue";
export default {
  name: "Main",
  components: {
    Lunbo,
  },
};
</script>
<style scoped>
.header {
  width: 1898px;
}
.main {
  width: 1240px;
  margin: 20px auto;
}
.main-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.top-ul {
  width: 258px;
  display: flex;
  justify-content: space-between;
}
.top-ul li {
  font-size: 20px;
  font-weight: 300;
  height: 30px;
  border-bottom: 2px solid red;
}
.top-span {
  color: red;
  font-size: 16px;
}
.li-img {
  width: 200px;
  height: 330px;
}
.btn-ul {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.btn-li {
  width: 200px;
  height: 330px;
  position: relative;
}
.seat {
  width: 200px;
  height: 50px;
  background: #eb002a;
  text-align: center;
  color: #fff;
  line-height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.img-name {
  width: 170px;
  display: flex;
  color: #fff;
  justify-content: space-between;
  position: absolute;
  left: 10px;
  bottom: 60px;
}
.can-img {
  width: 1898px;
  margin: 30px auto;
  background: #f4f4f4;
}
.can-img img {
  width: 1240px;
  height: 108px;
  margin: 0 auto;
}
.content {
  width: 1240px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
}
.hedaer-left {
  width: 375px;
}
.left-top {
  width: 375px;
  height: 46px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.left-top h6 {
  font-size: 16px;
  font-weight: 600;
}
.left-top span {
  font-size: 14px;
  color: #eb002a;
}
.love-top {
  width: 375px;
}
.love-li {
  width: 375px;
  display: flex;
  border-bottom: 1px solid #ccc;
}
.love-left {
  margin: 32px 0;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
  background: #eb002a;
  color: #fff;
}
.love-con {
  width: 260px;
  margin: 28px 10px;
}
.love-right {
  margin: 28px 0;
}
.hot-btn {
  margin: 12px;
}
.hot-btn span {
  display: block;
}
.hot-spantop {
  font-size: 18px;
  font-weight: 600;
}
.hot-spanbtn {
  font-size: 16px;
  font-weight: 400;
  color: #ccc;
}
</style>